<template>
  <div class="f-expected-box">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for = "item in imgList" :key = "item.id">
          <router-link :to="'/product/' + item.productCode">
            <div class="imgbox">
              <img :src=" item.productImageUrl" alt="">
              <!-- <span> {{ item.productName }} </span> -->
            </div>
          </router-link>
          <div class="text-box">
            <h3> {{ item.productName }} </h3>
            <p> ￥ {{ item.productPrice/100 + '.00' }} </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions,mapGetters } from 'vuex'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
  props: ['num'],
  data () {
    return {
      imgList: []
    }
  },
  methods: {
    ...mapActions(['getMobile5'])
  },
  computed: {
    ...mapGetters(['getMobile5s'])
  },
  async created () {
    // console.log(this.num,this.num1)
    switch(this.$route.path) {
      case '/activity/mobile/1':
        this.num == 1 && await this.getMobile5('843010,843033,10984,154505,51549,5982,660387,645382,26677,8381');
        this.num == 2 && await this.getMobile5('781554,839795,813212,724950,781557,781560,839796,839798,781558');
        break;
      case '/activity/mobile/2':
        await this.getMobile5('781554,839795,813212,724950,781557,781560,839796,839798,781558');
        break;
      case '/activity/mobile/3':
        await this.getMobile5('13734,10993,13700,830347,69124,321540,227286,527821,73440');
        break;
      case '/activity/mobile/4':
        this.num == 1 && await this.getMobile5('852006,849537,849540,852005,849532,854035,849545,846404,851929,854034,858586,858584,861065,858596,861073,861072,849544,852001,854005,854039,856241');
        this.num == 2 && await this.getMobile5('854035,854036,855624,855623,856742,854038,854037,854034,858586,858584');
        this.num == 3 && await this.getMobile5('846136,846403,846406,846407,846405,846404,846408');
        this.num == 4 && await this.getMobile5('851930,851931,851933,851932,851934,852404,858596,861072,851929');
        break;
    }
    this.imgList = this.getMobile5s?this.getMobile5s: []
    this.$nextTick( () => {
      new Swiper('.swiper-container', {
          slidesPerView: 3.6,
          spaceBetween: 30,
        });
    })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~Css/_ellipsis.styl'
  a 
    color #333

  .f-expected-box 
    background #fafafa
    width 100%
    padding .12rem 0rem
    margin-bottom .15rem
    p 
      margin: 0 0 12px;
      font-size: 14px;
      color: #333;
    .swiper-slide 
      width 1rem !important
      margin-right .1rem !important
      background #fff
      .imgbox
        width: .8rem;
        /* height: 1.4rem; */
        position: relative;
        overflow: hidden;
        padding: .1rem;
        img 
          width 100% 
          // height 100%
          height .8rem
        // span 
        //   display block
        //   width 100% 
        //   height .35rem
        //   position absolute 
        //   left 50%
        //   margin-left -.5rem
        //   bottom .04rem 
        //   z-index 1000
        //   color #faaf00
        //   font-size .11rem
        //   font-weight bold
        //   text-align center
        //   line-height .55rem
        //   background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000)
      .text-box 
        // padding-top .08rem
        padding: 0 .1rem;
        h3
          margin: 0 0 .03rem;
          font-size: .13rem;
          color: #222;
          ellipsis()
        p 
          margin: 0;
          font-size: .13rem;
          color: #999;
          text-align: center;
          padding: .05rem 0;

 
</style>